<template>
 <div class="customer_tabs">
   <div class="nav">
      <Breadcrumb separator=">">
        <Breadcrumb-item href="/customer">客户列表</Breadcrumb-item>
        <Breadcrumb-item href="/customer/addcustomer">客户360°视图</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="clear:both;"></div>
    <div class="tab_container">
        <Tabs size="default" :value="buttonid">
            <Tab-pane label="基础信息" name="1">
              <div class="basic_info_container">
                <Form :label-width="80" label-position="left">
                  <Card class="basic_form">
                    <h4 class="basic_tilte" style="font-weight:900">基础属性</h4>
                        <Row class="member">
                            <Col span="4">
                                <FormItem label="会员ID：" prop="memberId" :label-width="80">
                                    <p style="width:10vw;">{{basiclist.memberId}}</p>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <FormItem label="会员号：" prop="memberNum" :label-width="80">
                                    <p style="width:10vw;" v-if="basiclist.memberNum==null">暂无</p>
                                    <p style="width:10vw;" v-else>{{basiclist.memberNum}}</p>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <FormItem label="姓名：" prop="name" :label-width="80">
                                    <p style="width:10vw;" v-if="basiclist.name==null">暂无</p>
                                    <p style="width:10vw;" v-else>{{basiclist.name}}</p>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <FormItem label="性别：" prop="sex" :label-width="80">
                                    <p style="width:10vw;" v-if="basiclist.sex==1">男</p>
                                    <p style="width:10vw;" v-else>女</p>
                                </FormItem>
                            </Col>
                      </Row>
                      <Row class="birthday">
                          <Col span="4">
                            <FormItem label="生日：" prop="birthday" :label-width="80">
                                <p style="width:10vw;" v-if="basiclist.birthday == null">暂无</p>
                                <p style="width:10vw;" v-else>{{basiclist.birthday}}</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="会员手机号：" prop="telephone" :label-width="90">
                                <p style="width:10vw;" v-if="basiclist.telephone == null">暂无</p>
                                <p style="width:10vw;margin-left:-2vw;" v-else>{{basiclist.telephone}}</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="邮件：" prop="email" :label-width="80">
                              <p style="width:10vw;" v-if="basiclist.email == null">暂无</p>
                              <p style="width:10vw;" v-else>{{basiclist.email}}</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="会员类型：" prop="memberTypeName" :label-width="80">
                                <p style="width:10vw;" >{{basiclist.memberTypeName}}</p>
                            </FormItem>
                          </Col>
                      </Row>
                      <Row class="name">
                          <Col span="4">
                            <FormItem label="淘宝昵称：" prop="tabaoNick" :label-width="80">
                                <p style="width:10vw;" v-if="basiclist.tabaoNick == null">暂无</p>
                                <p style="width:10vw;" v-else>{{basiclist.tabaoNick}}</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="微信昵称：" prop="wxNick" :label-width="80">
                                <p style="width:10vw;" v-if="basiclist.wxNick == null">暂无</p>
                                <p style="width:10vw;" >{{basiclist.wxNick}}</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="是否粉丝：" prop="isWechatFans" :label-width="80">
                                <p style="width:10vw;" readonly v-if="basiclist.isWechatFans==1">是</p>
                                <p style="width:10vw;" readonly v-else>否</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="是否注册：" prop="isRegister" :label-width="80">
                                <p style="width:10vw;" readonly v-if="basiclist.isRegister==1">是</p>
                                <p style="width:10vw;" readonly v-else>否</p>
                            </FormItem>
                          </Col>
                      </Row>
                      <Row class="binding">
                          <Col span="4">
                            <FormItem label="是否绑定：" prop="isBind" :label-width="80">
                                <p style="width:10vw;" readonly v-if="basiclist.isBind==1">是</p>
                                <p style="width:10vw;" readonly v-else>否</p>
                            </FormItem>
                          </Col>
                          <Col span="4">
                            <FormItem label="是否购买：" prop="isPurchase" :label-width="80">
                                <p style="width:10vw;" readonly v-if="basiclist.isPurchase==1">是</p>
                                <p style="width:10vw;" readonly v-else>否</p>
                            </FormItem>
                          </Col>
                          <Col span="4"></Col>
                          <Col span="4"></Col>
                      </Row>
                </Card>
                <Card class="consignee_info_first" v-for="(item,index) in memberAddressList" :key="index">
                    <Row>
                        <Col span="21">
                            <h3 class="consignee_info_title">收货人信息</h3>
                            <div class="cumulative_consumption_box">
                                <Row style="margin-top:2vh;margin-left:2vw;">
                                    <Col span="5">
                                        <p v-if="item.name==null">姓名:暂无</p>
                                        <p v-else>姓名:{{item.name}}</p>
                                    </Col>
                                    <Col span="5">
                                        <p v-if="item.mobile==null">手机号码:暂无</p>
                                        <p v-else>手机号码:{{item.mobile}}</p>
                                    </Col>
                                    <Col span="12">
                                    <Row>
                                        <Col span="5">
                                            <p>常用联系地址：</p>
                                        </CoL>
                                        <Col span="14" v-if="item.province==null && item.city==null && item.areaName==null && item.address==null">
                                           <p>暂无</p>
                                        </Col>
                                        <Col span="14" v-else>
                                           {{item.province}}{{item.city}}{{item.areaName}}{{item.address}}
                                        </Col>
                                    </Row>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    </Row>
                </Card>
                <Card class="integral_info">
                    <h4 class="integral_info_title" style="font-weight:900">忠诚度属性</h4>
                    <Form :label-width="80">
                        <div class="member">
                            <FormItem label="会员等级：" prop="levelId" :label-width="80">
                                <p style="width:5vw;" v-if="basiclist.levelName==null">暂无</p>
                                <p style="width:5vw;" v-else>{{basiclist.levelName}}</p>
                            </FormItem>
                            <FormItem label="可用积分：" prop="availablePoints" :label-width="80">
                                <p style="width:5vw;">{{basiclist.availablePoints}}分</p>
                            </FormItem>
                            <FormItem label="注册渠道：" prop="registerChannelId" :label-width="80">
                                <p style="width:8vw;" v-if="basiclist.registerChannelName==null">暂无</p>
                                <p style="width:8vw;" v-else>{{basiclist.registerChannelName}}</p>
                            </FormItem>
                            <FormItem label="到期积分：" prop="totalExpiredPoints" :label-width="80">
                                <p style="width:5vw;">{{basiclist.totalExpiredPoints}}分</p>
                            </FormItem>
                            <FormItem label="入会时间：" prop="registerDate" :label-width="80">
                                <p style="width:5vw;" v-if="basiclist.registerDate == null">暂无</p>
                                <p style="width:10vw;" v-else>{{basiclist.registerDate}}</p>
                            </FormItem>
                      </div>
                    </Form>
                </Card>
                <Card class="trade_attribute">
                    <h4 class="trade_attribute_title" style="font-weight:900">交易属性</h4>
                    <Form  :label-width="80">
                        <div class="member">
                            <FormItem label="累计消费次数：" prop="consumeCount" :label-width="100">
                                <p style="width:5vw;">{{basiclist.consumeCount}}次</p>
                            </FormItem>
                            <FormItem label="累计消费金额：" prop="consumeAmount" :label-width="100">
                                <p style="width:5vw;">{{basiclist.consumeAmount}}元</p>
                            </FormItem>
                            <FormItem label="首次付款时间：" prop="firstPaymentDate" :label-width="100">
                                <p style="width:5vw;" v-if="basiclist.firstPaymentDate == null">暂无</p>
                                <p style="width:10vw;" v-else>{{basiclist.firstPaymentDate}}</p>
                            </FormItem>
                            <FormItem label="最后付款时间：" prop="lastPaymentDate" :label-width="100">
                                <p style="width:5vw;" v-if="basiclist.lastPaymentDate == null">暂无</p>
                                <p style="width:10vw;" v-else>{{basiclist.lastPaymentDate}}</p>
                            </FormItem>
                      </div>
                    </Form>
                </Card>
                <Row type="flex" justify="center">
                    <Col>
                        <!-- <Button type="primary" @click="SavebasciList">保存</Button> -->
                        <Button type="error" @click="routerback">返回</Button>
                    </Col>
                </Row>
               </Form>
              </div>
            </Tab-pane>
            <!--<Tab-pane label="交易记录" name="2">
              <div class="business_container" v-for="(item,index) in orderlist" :key="index">
                 <div class="goood_info">
                    <ul class="header">
                        <li>商品信息</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>买家</li>
                        <li>订单状态</li>
                        <li>实收款</li>
                    </ul>
                </div> 
                <div class="order">
                    <ul class="order_list">
                        <li>订单号:{{item.order_no}}</li>
                        <li>下单:{{item.payment_time | formatDate}}</li>
                        <li>付款:{{item.transaction_time | formatDate}}</li>
                        <li>订单来源:{{item.channel_name}}</li>
                    </ul>
                </div>
                <div class="goods_info">
                    <div class="good_attr" >
                        <div class=""  style="display:flex;border-right:1px solid #999;"  v-for="(items,index) in item.transactionDetailList" :key="index">
                            <ul class="goods_left">
                                <li class="goods_box" >
                                    <div class="goods_list">
                                        <div class="good_info_box">
                                            <div>
                                                <p>商品标题：{{items.title}}</p>
                                                <p>商品ID：{{items.product_code}}</p>
                                                <p>SKU名称：{{items.product_name}}</p>
                                            </div>
                                        </div>
                                        <div class="price">￥{{items.sale_price}}</div>
                                        <div class="number">{{items.product_qty}}</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="purchaser">
                            <p>收货人姓名:{{item.receiver_name}}</p>
                            <p>昵称:{{item.nickname}}</p>
                            <p>收件人手机:{{item.receiver_mobile}}</p>
                        </div>
                        <div class="order_status">
                            <p v-if="item.order_status==1">买家已付款，等待卖家发货</p>
                            <p v-else-if="item.order_status==2">交易关闭</p>
                            <p v-else-if="item.order_status==3">交易成功</p>
                            <p v-else-if="item.order_status==4">卖家已发货，等到买家确认</p>
                            <p v-else-if="item.order_status==5">未创建支付宝交易</p>
                            <p v-else-if="item.order_status==6">等待买家付款</p>
                        </div>
                        <div class="payrmb">
                            <p>￥{{item.real_payment_amount}}</p>
                            <p>（含运费：￥{{item.payment_post}}）</p>   
                        </div>
                        <div style="clear:both;"></div>
                        
                    </div> 
                </div>
                <div class="address">
                    <p>地址:{{item.receiver_address}}</p>
                </div>
              </div>
              <Row type="flex" justify="center">
                <Col>
                    <Button type="primary" @click="routerback">返回</Button>
                </Col>
             </Row>
            </Tab-pane>-->
            <Tab-pane label="社交账号" name="3">
              <div class="social_contact">
                    <!-- <Card class="tianmao_shop">
                        <h3 class="tianmao_title">天猫店铺</h3>
                        <div class="shop_box" v-for="(item,index) in tmall" :key="index">
                            <div class="shop_detail">
                            <p>天猫店铺</p>
                            <p style="padding-top:2vh;">{{item.appid}}</p>
                            </div>
                            <div class="shop_detail">
                            <p>是否入会</p>
                            <p style="padding-top:2vh;" v-if="item.is_bind">是</p>
                            <p style="padding-top:2vh;" v-else>否</p>
                            </div>
                            <div class="shop_detail">
                            <p>入会时间</p>
                            <p style="padding-top:2vh;">{{item.bind_time | formatDate}}</p>
                            </div>
                        </div>
                    </Card>
                    <Card class="tianmao_brand">
                        <h3 class="tianmao_brand_title">天猫品牌号</h3>
                        <div class="shop_box" v-for="(item,index) in tmallbrand" :key="index">
                        <div class="shop_detail">
                           <p>是否关注</p>
                           <p style="padding-top:2vh;" v-if="item.is_bind">是</p>
                           <p style="padding-top:2vh;" v-else>否</p>
                        </div>
                        <div class="shop_detail">
                           <p>关注时间</p>
                           <p style="padding-top:2vh;">{{item.bind_time | formatDate}}</p>
                        </div>
                        </div>  
                    </Card> -->
                    <Card class="wx_account" >
                        <h3 class="tianmao_wx_title">微信公众号</h3>
                        <div class="shop_box" >
                            <Card style="min-width:350px;float:left;margin:20px;"  v-for="(item,index) in wxacount" :key="index">
                                <div slot="title"  classs="shop_detail">
                                    <h3 style="color:lightskyblue;">公众号名称:
                                        <span style="padding-top:2vh;color:#333;">{{item.channelName}}</span>
                                    </h3>
                                </div>
                                <div classs="shop_detail">
                                    <h3 style="color:lightskyblue;">是否关注:
                                        <span style="padding-top:2vh;color:#333;" v-if="item.is_follow">是</span>
                                        <span style="padding-top:2vh;color:#333;" v-else>否</span>
                                    </h3>
                                </div>
                                <div classs="shop_detail">
                                    <h3 style="color:lightskyblue;">Open Id:
                                        <span style="padding-top:2vh;color:#333;">{{item.openid}}</span>
                                    </h3>
                                </div>
                                <div classs="shop_detail">
                                    <h3 style="color:lightskyblue;">Uni Id:
                                        <span style="padding-top:2vh;color:#333;">{{item.unionid}}</span>
                                    </h3>
                                </div>
                                <div classs="shop_detail">
                                    <h3 style="color:lightskyblue;">关注时间:
                                        <span style="padding-top:2vh;">{{item.first_follow_time}}</span>
                                        <!-- <span style="padding-top:2vh;">{{item.channelName}}</span> -->
                                    </h3>
                                </div>
                            </Card>
                        </div>
                        <div style="clear:both;"></div>
                    </Card>
                    <Row type="flex" justify="center" style="margin-top:2vh;">
                        <Col>
                            <Button type="primary" @click="routerback">返回</Button>
                        </Col>
                    </Row>
              </div> 
            </Tab-pane>
            <Tab-pane label="积分流水" name="4">
                <div class="Integral_flow">
                   <Table border :columns="columns5" :data="integrallist"></Table>
                    <Row type="flex" justify="center" class="code-row-bg">
                        <Col style="margin-top:2vh;">
                           <Page show-total :total="totalintegral" :page-size="pageSize" @on-change="pageable" show-sizer show-elevator></Page>
                        </Col>
                        <Col span="2" push="6" style="margin-top:2vh;">
                            <Button type="primary" @click="routerback">返回</Button>
                        </Col>
                    </Row>
                </div>
            </Tab-pane>
            <Tab-pane label="沟通记录" name="5">
                <div class="chat_record">
                   <Table border :columns="columns6" :data="communicationlist"></Table>
                    <Row type="flex" justify="center" class="code-row-bg">
                        <Col style="margin-top:2vh;">
                           <Page show-total :total="totalcommunication" :page-size="pageSizes" @on-change="pageables" show-sizer show-elevator></Page>
                        </Col>
                        <Col span="2" push="6" style="margin-top:2vh;">
                            <Button type="primary" @click="routerback">返回</Button>
                        </Col>
                    </Row>
                </div>
            </Tab-pane>
        </Tabs>
    </div>
 </div>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
import { fetchbasciList, fetchsocialList, fetchtardeList, fetchIntegral, fetchCommunication } from '@/api/customer'
export default {
  name: "customerview",
  data() {
    return {
      memberId:this.$route.params.id,
      buttonid:this.$route.params.buttonid,
      // 基础信息
      basiclist:[],  
      memberAddressList:[],   //收货人地址信息
      orderlist:[],
      integrallist:[],
      communicationlist:[],
      //积分流水
      columns5: [
        {
            title: '流水编号',
            key: 'id',
        },
        {
            title: '积分渠道',
            key: 'channelId'
        },
        {
            title: '积分数量',
            key: 'points'
        },
        {
            title: '积分描述',
            key: 'pointsComment'
        },
        {
            title: '积分类型',
            key: 'pointsTypeId'
        },
        {
            title: '积分变动时间',
            key: 'createDate',
            sortable: true,
            render: (h,params)=>{
              return h('div', this.changeDate(params.row.createDate));
            }
        },
        {
            title: '相关订单编号',
            key: 'externalId',
        },
    ],  
     columns6: [
        {
            title: '营销类型',
            key: 'marketingType',
        },
        {
            title: '营销活动主题',
            key: 'marketingTheme'
        },
        {
            title: '营销内容',
            key: 'marketingcontent'
        },
        {
            title: '营销创建时间',
            key: 'marketingCreate',
            sortable: true
        },
        {
            title: '营销发送时间',
            key: 'marketingSend',
            sortable: true
        },
    ],
    // 积分流水
    pageNum: 1,
    pageSize: 10,
    totalintegral: 0,
    // 沟通记录
    pageNums: 1,
    pageSizes: 10,
    totalcommunication: 0,
    tmall:[],
    tmallbrand:[],
    wxacount:[]
    };
  },
  components:{},
  methods:{
    ...mapMutations(['FETCH_PROVINCE','FETCH_CITY','FETCH_LEVEL_RUlE']),
    ...mapActions(['fetchprovinceLists','fetchcityList','fetchlevelRuleList']),
    pageable(current) {
        this.pageNum = current;
        this.FetchIntegral();
    },
    pageables(current) {
        this.pageNum = current;
        // this.FetchCommunication();
    },
    // 基础信息
    fetchbasciList() {
        var reqParams = {
            memberId:this.memberId,
        }
        fetchbasciList(reqParams).then(res=>{
            if(res.data.code == 200){
                this.basiclist = res.data.data;
                this.memberAddressList = res.data.data.memberAddressList;
            }
        }).catch((error)=>{
            this.$Message.error("操作失败【" + error + "】");
        })
    },
    // 社交账号
    fetchsocialList() {
        var reqParams = {
            memberId:this.memberId,
        }
        fetchsocialList(reqParams).then(res=>{
            if (res.data.code == 200) {
                this.tmall = res.data.data.tmall;
                this.tmallbrand = res.data.data.tmallBrand;
                this.wxacount = res.data.data.wx;
            } 
        }).catch(error=>{
            this.$Message.error("操作失败【" + error + "】");
        })
    },
    //时区日期格式转换(TZ)
    changeDate(dateA) {
      var dateee = new Date(dateA).toJSON();
      var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
      return date;
    },

    // 交易记录
    fetchtardeList() {
        var reqParams = {
            pageNum: this.pageNum,
            size: this.pageSize,
            total: this.total,
            memberId:this.memberId,
        };
        fetchtardeList(reqParams).then(res=>{
            if (res.data.code == 200) {
                this.orderlist = res.data.result.transactionPage.records;
                this.pageNum = res.data.result.transactionPage.current;
                this.size = res.data.result.transactionPage.size;
                this.total = res.data.result.transactionPage.total;
            } 
        }).catch((error)=>{
            this.$Message.error("操作失败【" + error + "】");
        })
    },
    
    // 积分流水
    FetchIntegral(){
       var reqParams = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            memberId:this.memberId,
        };
       fetchIntegral(reqParams).then((res)=>{
           if(res.data.code == 200){
               this.integrallist  = res.data.result.records;
           }
       })
       .catch((error)=>{
            this.$Message.error("操作失败【" + error + "】");
       })  
    },
    
    // // 沟通记录
    // FetchCommunication(){
    //    var reqParams = {
    //         pageNum: this.pageNum,
    //         pageSize: this.pageSize,
    //         totalcommunication: this.totalcommunication,
    //         memberId:this.memberId,
    //     };
    //    fetchCommunication(reqParams).then((res)=>{
    //        if(res.data.code == 200){

    //        }
    //    })
    //    .catch((error)=>{
    //         this.$Message.error("操作失败【" + error + "】");
    //    })  
    // },
 
    fetchinfo(){
        this.fetchbasciList();
        this.fetchsocialList();
        //this.fetchtardeList();
        this.FetchIntegral();
    },
    routerback() {
        this.$router.back(-1)
    },
    cardstyle(){
       return {
           display:'flex',
           justiftContent:'space-around',
       } 
    }
  },
  
   mounted () {
    this.fetchinfo();
  },
  computed:{
    ...mapState(['provincelist','citylist','levelRulelist']),
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customer_tabs {
  @include container_global;
  overflow: hidden;
  .nav {
    font-size: 20px;
    line-height: 30px;
    float: left;
    padding: 10px 0px 0px 10px;
  }
  .tab_container {
     @include background_global;
    .basic_info_container {
      .basic_form{     //基础属性表单
       padding: 20px 0px 3vw 0px;
       margin: 0px 0px 10px -30px;
       .basic_tilte {
        @include title_global;
        margin: -20px 0px 20px 3vw;
       } 
        .member, .birthday, .name, .binding{
          @include display_global;
          margin-bottom: 20px;
        }
      }
      .consignee_info_first{    // 收货人信息1
        background-color: #fff;
        margin-bottom: 2vh;
        padding: 2vw 0px 3vw 0px;
        .consignee_info_title{
           @include title_global;
           margin: 10px 0px 20px 1vw;
        }
        .cumulative_consumption_box{
            padding-left: 3vw;
        }
        .member{
          display: flex;
        }
      }
      .consignee_info_second{
        margin-top:10px;
        background-color: #fff;
        padding: 2vw 0px 3vw 0px;
        .consignee_info_second_title{
           @include title_global;
           margin: -20px 0px 20px 1vw;
        }
        .members{
           display: flex;
           background-color: #fff;
           padding: 1vw 0px 3vw 0px;
        }
      }
      .integral_info{  //积分信息
        margin-top:10px;
        background-color: #fff;
        padding: 1vw 0px 0px 0px;
        .integral_info_title{
            @include title_global;
        }
        .member{
          background-color: #fff;
          padding: 1vw 0px 3vw 5vw;
          display: flex;
        }
      }
      .trade_attribute{ //交易属性
        margin-top:10px;
        margin-bottom: 10vh;
        background-color: #fff;
        padding: 1vw 0px 3vw 0px;
        .trade_attribute_title{
            @include title_global;
        }
        .member{
           display: flex;
           margin-left: 5vw;
        }
      }
    }
    .business_container{   // 交易记录
        width: 80vw;
        min-height: auto; 
        position: relative;
        background-color: #fff;
        margin-bottom: 5vh;
        border: 1px solid #999;
        .goood_info{
            width: 80vw;   
            height: 4vh;
            background: #FFF;
            .header{
                background: #E4E4E4;
                @include ul_global;
                li{
                    width: 6vw;
                    @include li_global;
                }
                li:nth-child(1){
                    width: 30vw;
                }
                li:nth-child(4){
                    width: 10vw;
                }
                li:nth-child(5){
                    width: 14vw;
                }
            }
            .header_order{
                background: #E4E4E4;
                @include ul_global;
                li{
                    width: 6vw;
                    @include li_global;
                }
                li:nth-child(1){
                    width: 30vw;
                }
                li:nth-child(4){
                    width: 10vw;
                }
                li:nth-child(5){
                    width: 14vw;
                }
            }
        }
        .order{
          height: 6vh;
          line-height: 5vh;
          position: relative;
          margin-top: 3vh;
          border-bottom: 1px solid #999;
          .order_list{
              @include ul_global;
              li{
                 width: 15vw;
                 @include li_global;
              }
          }
        }
        .goods_info{
            min-height: auto;
            width: 80vw;
            @include display_global;
            border: 1px solid #666;
            .good_attr{
                height: 100%;
                width: 80vw;
                div{
                    display: block;
                    float: left;
                }
                .goods_left{
                    width: 40vw; 
                    height: 100%;
                    .goods_box{
                        width: 40vw; 
                        height: 100%;
                            @include display_global;
                        .goods_list{
                            @include display_global;
                            .good_info_box{
                                width: 26vw;
                                padding-top: 1vh;
                                padding-left:2vw;
                            }   
                            .price, .number{
                                @include pad_global;
                                padding-left: 5vw;
                            }
                        }
                        
                    }
                }
                .purchaser{
                    height: 100%;
                    text-align: center;
                    padding-left: 3vw;
                    @include list_global;
                }
                .order_status{
                    height: 100%;
                    padding-left: 2vw;
                    @include list_global;
                }
                .payrmb{
                    height: 100%;
                    padding-left: 1vw;
                    @include list_global;
                }
        }
    }
    .address{
        line-height: 50px;
        padding-left: 2vw;
    }
  }
  .social_contact{ //社交账号
       width: 85vw;
       min-height: 40vh;
     .wx_account{
          @include tianmao-global;
          margin-top: 10px;
          .tianmao_wx_title{
            @include title_global;  
          }
          .shop_box{
             .shop_detail{
               @include shop_detail;
            }
          }
          .shop_boxs{
             margin-top: -5vh;
             .shop_detail{
               @include shop_detail;
            }  
          }
     }
    } 
  }
}
</style>
